iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>系列 第 17

< 關於 Next: 開始打地基| CSS的引入方式 >

  • 分享至 

  • xImage
  •  

09-17-2021

本章內容
  • 添加樣式-全域樣式
  • 添加樣式-模組化樣式
  • 添加樣式-Sass
  • 添加樣式-其他的框架

添加樣式-全域樣式

在Next.js 中是可以使用JavaScript 導入 CSS 使用的
我們可以將在全域會使用到的樣式都統整在一個CSS文件中
例如說:
style.css

body {
  font:16px;
  padding-top:1em
  max-width: 680px;
  margin: 0 auto;
}

pages/_app.js中將style.cssimport進來使用
這樣就可以在全域中都使用到CSS的內容

import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

添加樣式-模組化樣式

在Next.js 中也可以將樣式模組化,將檔案命名為:[name].module.css
模組會自動創建class名稱,反而不需要擔心撞名的問題!
而且可以在每個component中import 。
例如:
設定樣式

.info {
  color: white;
  background-color: green;
}

引入使用就可以直接以變數styles當作CSS的class名稱,.info則是在樣式內定義的class名稱

import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"

      className={styles.info}
    >
      Destroy
    </button>
  )
}

添加樣式-Sass

Next.js可以擴充使用Sass,但需要先將套件安裝起來

npm install sass

再來就需要自定義在Next.config.js內設定Sass編譯器
添加includePaths:

const path = require("path");
module.exports = {
    // reactStrictMode: true,
    sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    },

添加樣式-其他的框架

目前還有許許多多常用的框架可以定義CSS,過後會在多介紹最近常用的
Chakra-UIStyled-component兩者,搭配使用在專案中~


上一篇
< 關於 Next: 開始打地基| SSR (Server-Side Rendering) 跟 CSR (Client-Side Rendering) 的差別 >
下一篇
< 關於 React: 開始打地基| 圖片的使用方式 >
系列文
<法式Terrine : React next.js Chakra-UI styled-component 精緻的搭配>18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言